<template>
  <div class="ui-friendsItem-0" v-if="checkedItem == 1">
    <el-checkbox-group v-model="checkedVmodelList">
      <el-checkbox class="ui-friends-item-warp ui-friends-item-warp-1" :class="{
        'ui-btn-del-box': false, //带不带删除按钮
        'ui-hide': false, //控制显示或隐藏
      }" v-for="(item, i) in groupMemberList" :key="item.userId" :label="item"
        :disabled="item.disabled || $store.state.chat.limitMax > 4" :checked="item.isManager"
        @change="onChangeManager(item)">
        <div class="display-flex item-first-word" v-if="type === 2 && showFirstWord(i, item)">
          {{ showFirstWord(i, item) }}
        </div>
        <div class="display-flex ui-friends-item">
          <img class="icon" :src="item.img ? item.img : item.headerUrl" alt="" height="40" width="40"
            style="border-radius: 50%" />
          <p class="name" :data="item.nickname">
            {{ item.nickname }}
          </p>
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <!-- type -->
  <div class="ui-friendsItem-1" v-else>

    <div class="ui-friends-item-warp ui-friends-item-warp-1" :class="{
      'ui-btn-del-box': checkedItem == 2, //带不带删除按钮
      'ui-hide': false, //控制显示或隐藏
    }" v-for="(item, i) in checkedManagerList" :key="item.userId" :label="item.userId" :disabled="false">

      <p class="text-left type" v-if="i == 0">
        添加管理 ({{ checkedManagerList.length }}/5)
      </p>
      <div class="display-flex ui-friends-item">
        <img class="icon" :src="item.img ? item.img : item.headerUrl" alt="" height="40" width="40"
          style="border-radius: 50%" />
        <p class="name" :data="item.nickname">
          {{
              item.nickname
          }}
        </p>
        <img class="icon-del" :src="require('@/assets/images/icon-close-circle@2x.png')" alt="" height="16" width="16"
          @click="delItem(item, i)" />
      </div>
    </div>
  </div>

  <div class="text-center ui-no-data"
    v-if="(checkedItem == 1 && groupMemberList.length == 0) || checkedItemRight == 2 && checkedManagerList.length == 0">
    {{ $t("noGroupChat") }}
  </div>

  <dialog-conter-view ref="dialogConterView1" :cancelShow="false" :title="dialogVieweTitle[dialogVieweCode]"
    @confirm="dialogConfirm">
    <template v-slot:content>
      <p class="remark">{{ dialogVieweInfo[dialogVieweCode] }}</p>
    </template>
  </dialog-conter-view>
</template>

<script>
import { mapState } from "vuex";
import { ADD_GROUP_MANAGER, BATCH_ADD_MANAGER, LIMIT_SELECT_MAX, } from '@/store/actiontypes'
export default {
  name: "friendsVue",
  //props:['type','checkedItem'],
  props: {
    type: {
      type: Number,
      default: 1,
    },
    //0:带右键菜单
    //1: 带checked 选中框
    //2: 带删除框
    //3:不按字母排序的
    checkedItem: {
      type: Number,
      default: 0,
    },
    //选中的list
    checkedPropsList: {
      type: Array,
      default: () => [],
    },
    // 默认已经是管理员的
    checkedDefaultList: {
      type: Array,
      default: () => [],
    },
    gMemberList: {
      type: Array,
      default: []
    },

    // 0：创建群聊
    // 1: 添加群员
    // 2: 转发最近联系人
    // 3: 转发新聊天
    setType: {
      type: Number,
      dafault: 0,
    },
  },
  computed: {
    ...mapState({})
  },
  data() {
    return {
      //
      list: [],
      listSearch: [],
      listSearchDefault: [],
      checkedVmodelList: [], //所有选中的人
      checkedManagerList: [], //选中的人
      dialogVieweCode: 0,
      dialogVieweTitle: {
        0: this.$t("delFriend"),
        1: this.$t("tip"),
      },
      dialogVieweInfo: {
        0: this.$t("confirmDelFriend"),
        1: this.$t("confirmQuitGroupChat"),
      },
      groupMemberList: this.gMemberList,
      selectedKey: null,
    };
  },
  methods: {
    //选中触发 更新右边选中所有的
    onChangeManager(val) {
      console.log("checkItem", val, this.checkedVmodelList)
      // this.checkedVmodelList - checkedDefaultList = .checkedManagerList
      this.checkedManagerList = this.checkedVmodelList.filter((item) => {
        //过滤
        const findItem = this.checkedDefaultList.find((fItem) => item.userId === fItem.userId)
        return !findItem ? true : false
      })
      this.$store.commit(LIMIT_SELECT_MAX, {
        limitMax: this.$store.state.chat.limitMax++
      })
      //通知父组件
      this.$emit("checkedData", {
        list: this.checkedManagerList,
        checkedItem: val
      });
    },
    /**
    * 删除item
    *
    */
    delItem(delItem, index) {
      //右边删除一个
      this.checkedManagerList.splice(index, 1);
      this.$store.commit(LIMIT_SELECT_MAX, {
        limitMax: this.$store.state.chat.limitMax--
      })
      this.$emit("updateGroupMemberList", {
        delItem,
        confirmDisable: this.checkedManagerList.length === 0
      })
    },
    // 查询
    search(text) {
      console.log("======= Search ========");
      console.log(this.type);
      console.log(text);
      if (text == "") {
        this.listSearch = this.listSearchDefault;
      } else {
        var arrA = [];
        this.listSearchDefault.forEach((v, i, arr) => {
          var con = 0;
          if (
            v.name &&
            v.name.toUpperCase().indexOf(text.toUpperCase()) !== -1
          ) {
            con++;
          }
          if (
            v.nickname &&
            v.nickname.toUpperCase().indexOf(text.toUpperCase()) !== -1
          ) {
            con++;
          }
          if (
            v.notes &&
            v.notes.toUpperCase().indexOf(text.toUpperCase()) !== -1
          ) {
            con++;
          }
          //notes
          if (con > 0) {
            arrA.push(v);
          }
        });
        this.listSearch = arrA;
      }
    },

    //
    setStatus(v, list) {
      var con = 0;
      if (list.length == 0) {
        return false;
      }
      list.forEach((item) => {
        if (item == v) {
          con++;
        }
      });
      return con > 0 ? true : false;
    },
    dialogConfirm(id) {
      console.log("0000000");
      this.$emit("friendProfileShow", false);
      if (this.dialogVieweCode == 0) {
        this.deleteFriends(id);
      } else {
        this.quitGroupChat(id);
      }
    },
    // 删除好友
    deleteFriends(friendId) {
      const than = this;
      this.$emit("resetData");
    },
    // 退出群聊
    quitGroupChat(groupId) {
      const than = this;
      this.$emit("resetData");
    },
    // 列表项目被选中
    clickItem(id, item, key, friendId) {
      //item.userId ?? item.userId, item, i, item.userId
      this.$emit("clickItem", {
        id: id,
        item: item,
      });
      this.selectedKey = key;
      this.$store.commit("UPDATE_SELECT_FRIENDID", friendId);
    },
    getFirstWord(item) {
      const firstWord = item.pinyin && item.pinyin.length ? item.pinyin[0] : "";
      return firstWord.toUpperCase();
    },
    showFirstWord(idx, item) {
      if (idx === 0) {
        return this.getFirstWord(item);
      } else {
        const firstWord = this.getFirstWord(this.groupMemberList[idx]);
        const preFirstWord = this.getFirstWord(this.groupMemberList[idx - 1]);
        if (preFirstWord !== firstWord) {
          return firstWord;
        }
      }
      return false;
    },
  },
  //type 1 单聊  type 2是群聊 更新群成员列表 因为当前会话已经进来了 
  mounted() {
    // var a = this.type == 1 ? (this.friendsList.length == 0 ? false : true) : (this.friendsList2.length == 0 ? false : true)
    var a = this.listSearch.length == 0 ? false : true;
    this.$emit("friendProfileShow", a);
    //this.search("");
  },
  watch: {
    listSearch: {
      handler(v) {
        console.log("=====listSearch=======");
        console.log(v);
      },
      deep: true,
      immediate: true,
    },
    checkedPropsList: {
      handler() {
        if (this.checkedItem == 2) {
          this.checkedManagerList = this.checkedPropsList;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="less">
.ui-friends-item-warp {
  .type {
    padding: 10px 16px 0;
    // margin-top: 32px;
    font-size: 14px;
    font-weight: 400;
    color: #909399 !important;
  }

  .item-first-word {
    // padding: 8px 16px;
    font-weight: 500;
  }

  .ui-friends-item {
    padding: 8px 16px;
    cursor: pointer;
    position: relative;

    .icon {}

    .name {
      flex: 1;
      margin-left: 12px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 500;
      color: #303133 !important;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .icon-del {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translate(0, -50%);
    }
  }

  .ui-friends-item:hover {
    background-color: #eee;
  }

  .ui-friends-item-selected {
    background-color: #eee;
  }
}

.ui-no-data {
  font-size: 14px;
  font-weight: 400;
  color: #909399;
  margin-top: 75px;
}
</style>
